<!-- frontend/templates/intervention_record.html -->

{% extends "layouts/base.html" %} {% block title %}干预操作记录管理{% endblock
%} {% block styles %}
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/bootstrap.min.css') }}"
/>

<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/core.css') }}"
/>
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/intervention_record.css') }}"
/>
{% endblock %} {% block content %}
<h5 class="mt-3">干预操作记录管理</h5>

<div class="row">
  <!-- 查询输入区域（配置驱动） -->
  <div id="fixedQueryArea"></div>

  <!-- 查询结果表（使用统一组件） -->
  <div id="scrollable-content" class="col-12">
    <div class="card" id="search-results" style="display: none">
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped table-hover w-100">
            <thead id="queryTableHead">
              <!-- 由通用QueryResultTable组件动态渲染 -->
            </thead>
            <tbody id="queryTableBody">
              <!-- 由通用QueryResultTable组件动态渲染 -->
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 分页控件 -->
    <div id="pagination-bar" style="text-align: center; margin: 16px 0"></div>

    <!-- 学生基本信息条 - 全局统一配置驱动 -->
    <div id="student-info-bar" class="student-info-bar-row" style="display: none;">
      <!-- 由全局统一的学生信息栏组件动态渲染 -->
    </div>

    <!-- 干预记录录入表单 - 配置驱动架构 -->
    <form id="intervention-form" style="display: none">
      <div class="card mb-4">
        <div class="card-header">干预操作录入</div>
        <div class="card-body">
          <!-- 基础信息区域 -->
          <div class="row g-3 mb-4">
            <div class="col-md-3">
              <label class="form-label">干预日期 *</label>
              <input
                class="form-control"
                type="date"
                name="intervention_date"
                required
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">操作时间 *</label>
              <input
                class="form-control"
                type="time"
                name="operation_time"
                required
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">干预方式 *</label>
              <select class="form-select" name="intervention_type" required>
                <!-- 配置驱动生成 -->
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">操作医生 *</label>
              <input class="form-control" name="operator" required />
            </div>
          </div>

          <!-- 操作详情区域 -->
          <div class="row g-3 mb-4">
            <div class="col-md-3">
              <label class="form-label">操作持续时间(分钟)</label>
              <input
                class="form-control"
                type="number"
                name="duration_minutes"
                min="1"
                max="300"
              />
            </div>
            <div class="col-md-3">
              <label class="form-label">操作地点</label>
              <select class="form-select" name="operation_location">
                <!-- 配置驱动生成 -->
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">即时效果</label>
              <select class="form-select" name="immediate_effect">
                <!-- 配置驱动生成 -->
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">配合程度</label>
              <select class="form-select" name="cooperation_level">
                <!-- 配置驱动生成 -->
              </select>
            </div>
          </div>

          <!-- 共用字段区域（始终显示） -->
          <div class="row g-3 mb-4">
            <div class="col-md-4">
              <div class="operation_tools-container">
                <!-- 配置驱动生成操作工具级联下拉框 -->
              </div>
            </div>
            <div class="col-md-4">
              <div class="consumed_materials-container">
                <!-- 配置驱动生成消耗材料级联下拉框 -->
              </div>
            </div>
            <div class="col-md-4">
              <div class="operation_sites-container">
                <!-- 配置驱动生成操作部位级联下拉框 -->
              </div>
            </div>
          </div>

          <!-- 专用字段动态插入区域（完全由JavaScript配置驱动生成） -->
          <!-- 此区域保持完全空白，所有专用字段由renderSpecificFields函数根据配置动态生成 -->

          <!-- 患者反应和详细记录 -->
          <div class="row g-3 mb-4">
            <div class="col-md-12">
              <label class="form-label">患者反应</label>
              <input
                class="form-control"
                name="patient_reaction"
                placeholder="如：舒适、热感、轻微疼痛等"
              />
            </div>
            <div class="col-md-12">
              <label class="form-label">操作记录/补充说明</label>
              <textarea class="form-control" name="details" rows="3"></textarea>
            </div>
          </div>
        </div>

        <div class="card-footer mb-3 text-end">
          <button type="submit" class="btn btn-primary">保存</button>
          <button type="button" class="btn btn-secondary" id="btn-back">
            返回
          </button>
          <button type="button" class="btn btn-info" id="btn-show-all">
            查询全部干预记录
          </button>
          <button type="button" class="btn btn-success" id="btn-export-xlsx">
            导出Excel
          </button>
          <button type="button" class="btn btn-warning" id="btn-export-csv">
            导出CSV
          </button>
        </div>
      </div>
    </form>

    <!-- 干预记录历史表格区域 -->
    <div id="history-table-area" class="col-12 col-lg-12" style="display: none">
      <div class="card">
        <div class="card-header">干预记录历史</div>
        <div class="card-body">
          <table class="table table-hover" id="history-table">
            <thead>
              <tr id="history-table-header">
                <!-- 🔧 清理硬编码：配置驱动生成 -->
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <div class="card-footer text-end">
          <button
            type="button"
            class="btn btn-secondary"
            id="btn-view-all-logs"
          >
            查看全部日志
          </button>
          <button type="button" class="btn btn-success" id="btn-export-xlsx">
            导出Excel
          </button>
          <button type="button" class="btn btn-info" id="btn-export-csv">
            导出CSV
          </button>
          <button
            type="button"
            class="btn btn-outline-primary"
            id="btn-student-record"
          >
            学生档案
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script src="{{ url_for('static', filename='js/FixedQueryArea.js') }}"></script>
<script src="{{ url_for('static', filename='js/QueryResultTable.js') }}"></script>
<script src="{{ url_for('static', filename='js/components/student-info-bar.js') }}"></script>
<script src="{{ url_for('static', filename='js/intervention_record.js') }}"></script>
{% endblock %}
